<template>
    <div>
        <div class="content-box">
            <div class="search-container">
                <div class="form-content">
                    <el-form :inline="true" ref="filterFormRef" :model="filter" class="demo-form-inline">
                        <el-form-item label="姓名" prop="realName">
                            <el-input v-model.trim="filter.realName" maxlength="200" placeholder="请输入姓名" clearable/>
                        </el-form-item>
                        <el-form-item label="账号" prop="loginName">
                            <el-input v-model.trim="filter.loginName" maxlength="200" placeholder="请输入账号" clearable/>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model.trim="filter.mobile" maxlength="11" placeholder="请输入手机号" clearable/>
                        </el-form-item>
                        <!-- <el-form-item label="教育id" prop="eduId">
                            <el-input v-model="filter.eduId" placeholder="请输入教育id" />
                        </el-form-item>
                        <el-form-item label="所在单位" prop="school">
                            <el-input v-model="filter.school" placeholder="请输入所在单位" />
                        </el-form-item> -->
                        <el-form-item label="状态" prop="yn" class="w200">
                            <el-select v-model="filter.yn" placeholder="全部" clearable>
                                <el-option label="全部" value="" />
                                <el-option label="启用" :value="1" />
                                <el-option label="禁用" :value="0" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="search-btn">
                    <el-button type="primary" @click="getFilterParams">查询</el-button>
                    <el-button @click="resetForm(filterFormRef)">重置</el-button>
                </div>
            </div>
            <div class="operate-btn">
                <!-- <el-button type="primary" :icon="Plus" @click="addUser()">新增用户</el-button> -->
            </div>
            <div>
                <!-- 列表 -->
                <table-wrap hideHeader title="用户列表" :total="total"
                        :loading="loading" v-model:pageSize="requestData.pageSize"
                        v-model:pageIndex="requestData.pageIndex" :tableData="tableData" @request-list="getList">
                        <el-table-column label="序号" align="center" fixed="left" min-width="80" show-overflow-tooltip>
                            <template #default="scope">
                                <div>{{(requestData.pageIndex - 1 )*requestData.pageSize+scope.$index+1}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="realName" min-width="140" label="姓名" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="loginName" min-width="140" label="账号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mobile" min-width="140" label="手机号" show-overflow-tooltip></el-table-column>
                        <!-- <el-table-column prop="eduId" min-width="140" label="教育ID" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="school" min-width="140" label="所在单位" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="phone" min-width="140" label="所属站点" show-overflow-tooltip>
                            <template #default="scope">
                                <el-button type="primary" link @click="viewSites(scope.row)">{{scope.row.institutionList?scope.row.institutionList.length:0}}</el-button>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="created" min-width="140" label="创建时间" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ dayjs(scope.row.gmtCreate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="yn" min-width="100" label="状态">
                            <template #default="scope">
                                <el-switch
                                    v-model="scope.row.yn"
                                    width="50px"
                                    class="ml-2"
                                    inline-prompt
                                    active-text="启用"
                                    inactive-text="禁用"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="enableAccount(scope.row)"
                                    :disabled="!btnAuthMap['midrange:front:user:status']"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" fixed="right" align="center">
                            <template #default="scope" v-if="btnAuthMap['midrange:front:user:reset']">
                                <!-- <el-button type="primary" link @click="viewDetail(scope.row)">详情</el-button> -->
                                <el-button type="primary" link @click="resetPassword(scope.row)">重置密码</el-button>
                            </template>
                        </el-table-column>
                </table-wrap>
            </div>
        </div>
        <AddUser v-if="userDialogParams.show" :dialogParams="userDialogParams" :account="currentUser" @dialog:close="closeUserDialog" @dialog:confirm="confirmUserDialog"></AddUser>
        <Sites v-if="sitesDialogParams.show" :dialogParams="sitesDialogParams" :account="currentUser" @dialog:close="closeSitesDialog" @dialog:confirm="confirmSitesDialog"></Sites>
        <UserDetail v-if="rolesDialogParams.show" :dialogParams="rolesDialogParams" :account="currentUser" @dialog:close="closeRolesDialog" @dialog:confirm="confirmRolesDialog"></UserDetail>
    </div>
</template>
<script>
    import { reactive, ref, onMounted } from 'vue'
    import { useStore } from 'vuex'
    import TableWrap from '@/components/table-wrap/table-wrap.vue'
    import AddUser from './dialog/add-user.vue'
    import Sites from './dialog/sites.vue'
    import UserDetail from './dialog/user-detail.vue'
    import {
        Plus, Search
    } from '@element-plus/icons-vue'
    import dayjs from 'dayjs';
    import Dialog from '@/lib/fn.js'
    import { useBtnAuth } from '@/hooks/useBtnAuth.js'
    export default {
        name: 'user-list',
        components: { TableWrap, AddUser, Sites, UserDetail },
        setup() {
            const store = useStore()
            const filterFormRef = ref()

            const filter = reactive({
                realName: null,
                loginName: null,
                mobile: null,
                // eduId: '',
                // school: '',
                yn: null
            });
            const { btnAuthMap, getOpBtnLen } = useBtnAuth()
            const keyword = ref('')
            const multipleTable = ref()
            const tableData = ref([]);
            const total = ref(0);
            const loading = ref(false);
            const requestData = ref({
                pageIndex: 1,
                pageSize: 10
            });
            const multipleSelection = ref([])
            // 新增账号页面
            const userDialogParams = ref({
                show: false,
                title: '新增用户',
                width: '900px',
                showButton: true
            })
            // 所属站点对话框参数
            const sitesDialogParams = ref({
                show: false,
                title: '所属站点',
                width: '600px',
                showButton: false
            })
            const currentUser = ref()
            const getRowKeys = (row) => {
                return row.id;
            }
            const onSubmit = () => {
                console.log('submit!');
            };
            const getFilterParams = () => {
                requestData.value.pageIndex = 1
                getList()
            }
            const resetForm = (formEl) => {
                console.log('reset', formEl)
                if (!formEl) return
                formEl.resetFields()
                getList()
            }
            // 列表
            const getList = () => {
                loading.value = true

                store.dispatch('proxyAction', {
                    name: 'getUserList',
                    data: {
                        ...filter,
                        ...requestData.value
                    }
                }).then((res) => {
                    if(res&&res.data) {
                        tableData.value = res.data.rows || [];
                        total.value = res.data.total;
                    }
                }).finally(() => {
                    loading.value = false;
                })
            }
            // 添加账号对话框
            const addUser = (item) => {
                userDialogParams.value.show = true;
                if (item) {
                    userDialogParams.value.title = '编辑用户'
                    currentUser.value = item
                } else {
                    currentUser.value = null
                }
            }
            // 启用用户
            const enableUser = (userId, yn) => {
                store.dispatch('proxyAction', {
                    name: 'frontEnableUser',
                    data: {
                        userId, yn
                    }
                }).then((res) => {
                    console.log('res', res)
                    store.dispatch('message', {
                        message: yn?'已启用':'已禁用'
                    })
                }, (error) => {
                    console.log('error', error)
                })
            }
            const enableAccount = (item) => {
                Dialog.Confirm(function(){
                    enableUser(item.id, item.yn)
                }, item.yn?'启用后，该用户可以正常访问平台，是否确认启用？':'禁用后，该用户将无法进入平台，是否确认禁用？', item.yn?'确定启用':'确定禁用', function(){
                    item.yn = item.yn ? 0: 1
                })()
            }
            // 关闭添加账号对话框
            const closeUserDialog = () => {
                userDialogParams.value.show = false;
                currentUser.value = null
            }
            // 账号对话框confirm
            const confirmUserDialog = () => {
                userDialogParams.value.show = false;
                currentUser.value = null
            }
            // 所属站点对话框
            const viewSites = (item) => {
                sitesDialogParams.value.show = true;
                sitesDialogParams.value.title = '所属站点'
                currentUser.value = item
            }
            // 关闭所属站点对话框
            const closeSitesDialog = () => {
                sitesDialogParams.value.show = false;
                currentUser.value = null
            }
            // 所属站点对话框confirm
            const confirmSitesDialog = () => {
                sitesDialogParams.value.show = false;
                currentUser.value = null
            }
            // 分配角色对话框参数
            const rolesDialogParams = ref({
                show: false,
                title: '角色详情',
                showButton: false
            })
            // 详情对话框
            const viewDetail = (item) => {
                rolesDialogParams.value.show = true;
                currentUser.value = item
            }
            // 关闭添加账号对话框
            const closeRolesDialog = () => {
                rolesDialogParams.value.show = false;
            }
            // 账号对话框confirm
            const confirmRolesDialog = () => {
                rolesDialogParams.value.show = false;
            }
            const resetPassword = (item) => {
                console.log('item', item)
                Dialog.Confirm(function(){
                    store.dispatch('proxyAction', {
                        name: 'wandChangePassword',
                        data: {
                            userId: item.id,
                            password: 'srt123'
                        }
                    }).then(() => {
                        store.dispatch('message', {
                            message: '密码重置成功'
                        });
                    }).catch(err => {
                        store.dispatch('message', {
                            message: err.message || '操作失败'
                        });
                    })
                }, '密码将被重置为srt123，是否确认？', '重置密码')()
            }
            onMounted(() => {
                getList()
            })

            return {
                filter,
                filterFormRef,
                btnAuthMap,
                getOpBtnLen,
                keyword,
                tableData,
                total,
                requestData,
                loading,
                multipleSelection,
                userDialogParams,
                currentUser,
                getFilterParams,
                resetForm,
                onSubmit,
                Search,
                Plus,
                getRowKeys,
                getList,
                dayjs,
                addUser,
                enableAccount,
                closeUserDialog,
                viewSites,
                sitesDialogParams,
                closeSitesDialog,
                confirmUserDialog,
                confirmSitesDialog,
                rolesDialogParams,
                viewDetail,
                closeRolesDialog,
                confirmRolesDialog,
                resetPassword
            };
        }
    };
</script>
<style scoped lang="scss">
.content-box {
    min-height: calc(100vh - 200px);
    padding: 20px;
}
.w200 {
    width: 200px;
}
.mr0 {
    margin-right: 0;
}
.mt20 {
    margin-top: 20px;
}
.search-input {
    width: 270px;
}
.filter-box {
    display: flex;
    .el-form {
        flex: 1
    }
}
</style>